<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/pageable.js"></script>
<script>
	var contentDefault = "（请在此描述您的问题）";
	var maxUpload = 10; //上傳檔案數
	var maxSize = 500; //每個檔案限制500k
	
	$().ready(function() {
		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 180,
			width:350,
			modal: true
		});
		$("#commit").click(function(){
			$("#dialog").dialog('close');
		});
		
		if ($("#content").val() == "") {
			$("#content").val(contentDefault);
		}
		
		var validCaptcha = ${validCaptcha};
		if (!validCaptcha) {
			$("#validValueTip").html("验证码错误!!");
			$("#validValueTip").show();
			$("#validValue").focus();	
		}
		var validOrderId = ${validOrderId};
		if (!validOrderId) {
			$("#orderIdTip").html("订单编号不存在");
			$("#orderIdTip").show();
			$("#orderId").focus();	
		}
		
		<s:if test="hasFieldErrors()">
			var uploadError = "<s:property value="fieldErrors['attach']"/>";
			if (uploadError != "") {
				$("#attachTip").show();
			}
		</s:if>
		
		$("#attach-0").bind("change",appendAttEvent);
		
		$("#cellPhone").numeric();
		$("#phoneArea").numeric();
		$("#phone").numeric();
		$("#phoneExt").numeric();
		
		$("#saveButton").click(function(){
			$(":span[id*='Tip']").each(function(){
				$(this).hide();
			});
			if ($("#email").val() == "") {
				$("#emailTip").html("请输入邮箱");
				$("#emailTip").show();
				$("#email").focus();
				return false;
			}
			if(!validateEmail($("#email").val())) {
				$("#emailTip").html("邮箱地址格式不正确");
				$("#emailTip").show();
				$("#email").focus();
				return false;
			}
			
			if ($("#orderId").val() == "") {
				$("#orderIdTip").html("请输入订单编号");
				$("#orderIdTip").show();
				$("#orderId").focus();
				return false;
			}
			
			if ($("#cellPhone").val() == "" && ($("#phoneArea").val() == "" || $("#phone").val() == "")) {
				$("#cellPhoneTip").html("固定电话与手机至少需填写一项");
				$("#cellPhoneTip").show();
				$("#phoneTip").html("固定电话与手机至少需填写一项");
				$("#phoneTip").show();
				return false;
			}
			
			if ($("#cellPhone").val() != "") {
				if ($("#cellPhone").val().length > 11) {
					$("#cellPhoneTip").html("手机号码长度最多十一位，限数字。");
					$("#cellPhoneTip").show();
					return false;
				}
			}
			if ($("#phoneArea").val() != "" && $("#phone").val() != "") {
				var phoneLen = $("#phoneArea").val().length + $("#phone").val().length;
				if (phoneLen < 5 || phoneLen > 11) {
					$("#phoneTip").html("电话号码长度最少五位，最多十位，限数字。");
					$("#phoneTip").show();
					return false;
				}
			}
			
			if ($("#content").val() == "" || $("#content").val() == contentDefault ) {
				$("#contentTip").html("请填写问题");
				$("#contentTip").show();
				$("#content").focus();
				return false;
			} else if ($("#content").val().length > 500) {
				$("#contentTip").html("问题长度限制为500个字");
				$("#contentTip").show();
				$("#content").focus();
				return false;
			}
			
			var isUploadValid = true;
			$(":input[id*='Correct']").each(function(){
				if ($(this).val() != "") {
					var attachId = ($(this).attr("id").substring(0,$(this).attr("id").length-7));
					$("#attachTip").show();
					$("#"+attachId).focus();
					isUploadValid = false;
					return false;
				}
			});
			if (!isUploadValid) return false;
			
			if ($("#validValue").val() == "") {
				$("#validValueTip").html("请填验证码");
				$("#validValueTip").show();
				$("#validValue").focus();
				return false;
			}
			
			$("#mainForm").submit();
			return false;
		});
		
		$("#iv").attr("src","<c-rt:url value="/servlet/imageValid.jpg"/>?"+Math.random());
		$("#changeValidImage").click(function(){
			$("#iv").attr("src","<c-rt:url value="/servlet/imageValid.jpg"/>?"+Math.random());
		});
		
		if($("#content").val()!=contentDefault) {
			$("#content").css("color","#000");
		} else {
			$("#content").css("color","#999");
		}
		$("#content").focus(function(){
			if($("#content").val()==contentDefault) {
				$("#content").val("");
				$("#content").css("color","#000");
			}
		});
		$("#content").blur(function() {
			if($("#content").val()==''){
				$("#content").val(contentDefault);
				$("#content").css("color","#999");
			}
		});
		$("#content").keyup(function(){
			var cnt = 500-$("#content").val().length;
			if (cnt < 0) cnt = 0;
			$('#wordCountDown').html(cnt);
			if($("#content").val().length>500){
				$("#dmsg").text("已超过字数限制");
				$("#dialog").dialog('open');
				return false ;
			}
		});
		
		
	});
	
	function check(id) {
		if ($("#"+id).val() == "") {
			$("#"+id + "Tip").show();
			$("#"+id).focus();
			return false;
		}
		return true;
	}
	
	function appendAttEvent() {
		var id = $(this).attr("id");
		if ($(this).val() == "") {
			$("#"+id+"Correct").val("");
			return;
		}
		//檢查檔案格式及大小
		
		var attObject = document.getElementById(id);
		checkUploadFile(attObject,maxSize,$("#"+id+"Correct"),"");
	}
	
	function appendUploadObject(currentId) {
		if ($("#"+currentId+"Correct").val() != "") return;
		var cnt = $("input:file[id*='attach']").length;
		if (cnt >= maxUpload) return;
		var currentIndex = (currentId.substring(7))*1;
		if (currentIndex < cnt-1) return;
		var id = "attach-"+ cnt;
		$button = $("<input type=\"file\"  id=\""+id+"\" name=\"attach\" class=\"file-upload\" size=\"40\" />");
		$button.bind("change",appendAttEvent);
		$("#attachFiles").append("<div>").append($button).append("<input type=\"hidden\" id=\""+id+"Correct\" value=\"\"/>").append("</div>");
	}
	
	function checkUploadFile(_fileobject,_size,isCorrectH,posMsg) {
		var msg = "" ;
		var imgpath = _fileobject.value;
		var fileType = imgpath.substring(imgpath.lastIndexOf(".")+1).toLowerCase();
		if (fileType != 'gif' && fileType != 'jpg' && fileType != 'jpeg' && fileType != 'png'){
			msg = "档案格式不是图片,请使用:JPG , GIF, PNG:"+ fileType;
			isCorrectH.val(msg);
			alert(msg);
		}else{
		  var isIE = false;
		  var isFF = false;
		  var isSa = false;
		  var isGo = false;
		
		  if((navigator.userAgent.toLowerCase().indexOf("msie")>0) && (parseInt(navigator.appVersion) >=4))isIE = true;
		  if(navigator.userAgent.toLowerCase().indexOf("firefox")>0)isFF = true;
		  if(navigator.userAgent.toLowerCase().indexOf("chrome")>0)isGo = true;
		  if(navigator.userAgent.toLowerCase().indexOf("safari")>0)isSa = true; 	
			
			if ( isIE ) {
				try {
					var activeX = new ActiveXObject("Scripting.FileSystemObject");
					var doc = _fileobject.value;
					var fi = activeX.getFile(doc);
					return validationUploadFile(_fileobject,fi,fi,_size,isCorrectH,posMsg) ;
				} catch (e) {
					isCorrectH.val("");
					appendUploadObject(_fileobject.id);
				}
				
			} else if( isFF ) {
				var fi = _fileobject.files.item(0);
				return validationUploadFile(_fileobject,fi,fi.getAsDataURL(),_size,isCorrectH,posMsg) ;
			} else {
				isCorrectH.val("");
				appendUploadObject(_fileobject.id);
			}
		}
	}
	function validationUploadFile(_fileobject,_file,_imgSrc,_size,isCorrectH,posMsg) {
		var msg = "" ;
		var image = new Image();
		var imgCorrect = true;
		image.src = _imgSrc;
		setTimeout(function(){
			if ((_file.size/1024) > _size ) {
				imgCorrect = false;
				msg =  msg+"档案大小: "+ Math.round(_file.size/1024) +"k 超过限制。";
			}
			if(imgCorrect){
				isCorrectH.val('');
				appendUploadObject(_fileobject.id);
			}else{
				isCorrectH.val(posMsg + msg);
				alert(posMsg + msg,{ 
					position: 'left', 
					focus: true, 
					alertzIndex: 300, 
					alertClass: 'default' 
					});  
			}
		},100);
	}
</script>
</head>
<body>
	<div id="dialog" class="service-alert" title="投诉与建议" style="display:none">
<br /><p style="text-align:left;"><span id="dmsg">33333</span></p><br />
<div style="text-align:center;"><a href="javascript:;" id="commit" class="btn-mid">确定</a></div></div>
	<h2>
		<strong>投诉与建议</strong>
	</h2>
	<div class="hp-tabs">
		<ul class="pdtab">
			<li><a href="#" class="pdtab-f" title="问题投诉">问题投诉</a>
			</li>
			<li><a href="<s:url value="../advice/main.do"/>" title="网站服务建议">网站服务建议</a>
			</li>
		</ul>
		<s:form action="complain/save.do" id="mainForm" method="POST" enctype ="multipart/form-data" >
		<div class="tab-content" style="display: block;">
			<table class="tb-2-service">
				<tr>
					<th><div class="vt2">投诉类别：</div>
					</th>
					<td>
						<table class="tb-2-service1">
							<c-rt:forEach var="commonQuestionType" items="${questionTypes}" varStatus="st">
								<c-rt:if test="${st.count%4 == 1}">
									<tr><td class="l-trim">
								</c-rt:if>
								<c-rt:if test="${st.count%4 != 1}">								
									<td>
								</c-rt:if>

								<c-rt:choose>
									<c-rt:when test="${(empty class2 && st.count==1)|| commonQuestionType.id == class2}">
										<c-rt:set var="checked" value="checked=\"checked\""/>
									</c-rt:when>
									<c-rt:otherwise>
										<c-rt:set var="checked" value=""/>
									</c-rt:otherwise>
								</c-rt:choose>	
								<label><input type="radio" name="class2" id="class2" value="${commonQuestionType.id}" ${checked}/>${commonQuestionType.name}</label>	
								
								</td>
								<c-rt:if test="${st.count%4 == 0}">
									</tr>
								</c-rt:if>
							</c-rt:forEach>
						</table> <span style="display: block;"><span style="display:none" class="msg rn" id="class2Tip">请选择投诉类别</span>
					</span></td>
				</tr>

				<tr>
					<th>用户名：</th>
					<td>${user }</td>
				</tr>
				<tr>
					<th><span class="txt-rd astro">*</span>邮箱：</th>
					<td><input name="email" id="email" type="text" value="${email }" /><span
						style="display: block;"><span style="display:none" class="msg rn" id="emailTip">请输入邮箱</span>
					</span>
					</td>
				</tr>
				<tr>
					<th><span class="txt-rd astro">*</span>订单编号：</th>
					<td><input name="orderId" id="orderId" type="text" value="${orderId}" /><a
						class="form-aside" href="<%=ServerValue.getFrontContextPath()%>/member/myOrder/showOrders.do?t=T&p=1" target="_blank">查询</a><span style="display: block;"><span style="display:none"
							class="msg rn" id="orderIdTip">请输入订单编号</span>
					</span>
					</td>
				</tr>
				<tr>
					<th><span class="txt-rd astro">*</span>手机号码：</th>
					<td><input name="cellPhone" id="cellPhone" type="text" value="${cellPhone }" maxlength="11" /><span
						style="display: block;"><span style="display: none;" class="msg rn" id="cellPhoneTip">手机号码长度最多十一位，限数字。</span>
					</span>
					</td>
				</tr>
				<tr>
					<th><span class="txt-rd astro">*</span>固定电话：</th>
					<td><input name="phoneArea" id="phoneArea" type="text" value="${phoneArea}" size="3" maxlength="4"/> - <input
						name="phone" id="phone" type="text" value="${phone}" size="10" maxlength="8" /> - 分机 <input name="phoneExt" id="phoneExt"
						type="text" value="${phoneExt}" size="3" maxlength="8"/>

						<p class="txt-gy">
							（标注<strong class="txt-rd astro">*</strong>为必填栏位，固定电话与手机至少需填写一项。）
						</p>
						<span style="display: block;"><span style="display: none;" class="msg rn" id="phoneTip">电话号码长度最少五位，最多十位，限数字。</span>
					</span>
					</td>
				</tr>
				<tr>
					<th><div class="vt">
							<span class="txt-rd astro">*</span>问题描述：
						</div>
					</th>
					<td><label> <textarea class="tab-textarea txt-gy" name="content" id="content" rows="7">${content }</textarea> </label>
						<p class="txt-gy">还可输入 <span id="wordCountDown">500</span> 字</p> <span style="display: block;"><span style="display: none;" class="msg rn"  id="contentTip">请填写问题</span>
					</span></td>
				</tr>
				<tr>
					<th><div class="vt">附加图档：</div>
					</th>
					<td class="upload-td-cell">
						<div id="attachFiles">
							<div><input type="file" id="attach-0" name="attach" class="file-upload" size="40" /><input type="hidden" id="attach-0Correct" value=""/></div>
						</div>
						<p class="txt-gy">（上传图档之格式限定为jpg, png
							或gif档案，每个档案不超过500kb，最多上传10个档案。 ）</p><span style="display: block;"><span style="display: none;" class="msg rn" id="attachTip">请依指定格式上传图档</span></td>
				</tr>
				<tr>
					<th><div class="vt3">验证码：</div>
					</th>
					<td><INPUT size="20" name="validValue" id="validValue" value="" autocomplete=false/> <img src="" id="iv" name="iv"> <a href="javascript:;" id="changeValidImage">看不清？换张图片</a>
						<span style="display: block;"><span style="display: none;" class="msg rn"  id="validValueTip">请填验证码</span>
					</span></td>
				</tr>
			</table>
			<p align="center">
				<a href="#" id="saveButton" class="btn-mid">提交问题</a>
			</p>
		</div>
		</s:form>
	</div>
</body>
</html>
